<template>
    <div class="container">
        
    <div class="page-header">
      <div class="back-button">
        <el-button type="primary" @click="$router.push('/main/renshi/zhaoping/yijipgb/yijipgb')" icon="el-icon-back">返回</el-button>
      </div>
      <h1>一级评估输出指引表列表</h1>
    </div>

        <div class="main-content">
            <!-- 搜索栏 -->
            <div class="search-bar">
                <el-form :inline="true" :model="searchForm" class="search-form">
                    <el-form-item label="学员姓名">
                        <el-input v-model="searchForm.studentName" placeholder="请输入学员姓名" clearable />
                    </el-form-item>
                    <el-form-item label="学员工号">
                        <el-input v-model="searchForm.studentId" placeholder="请输入学员工号" clearable />
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-input v-model="searchForm.department" placeholder="请输入部门" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch" icon="el-icon-search">搜索</el-button>
                        <el-button @click="resetSearch" icon="el-icon-refresh">重置</el-button>
                        <el-button type="success" @click="handleAdd" icon="el-icon-plus">新增</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 数据表格 -->
            <el-table
                v-loading="loading"
                :data="tableData"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="courseName" label="培训课程名称" min-width="150" />
                <el-table-column prop="courseDate" label="日期" width="100" />
                <el-table-column prop="studentName" label="学员姓名" width="100" />
                <el-table-column prop="studentId" label="学员工号" width="100" />
                <el-table-column prop="studentDepartment" label="部门" width="120" />
                <el-table-column prop="overallRating" label="总体评分" width="100" />
                <el-table-column prop="lecturerEvaluation" label="讲师评价" width="100" />
                <el-table-column label="操作" width="300" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            @click="handleView(scope.row)"
                            icon="el-icon-view">查看</el-button>
                        <el-button
                            size="mini"
                            type="success"
                            @click="handleEdit(scope.row)"
                            icon="el-icon-edit">编辑</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)"
                            icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.current"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { getPageApi, removeApi, batchRemoveApi } from '@/api/yijipgb'

export default {
    data() {
        return {
            loading: false,
            searchForm: {
                studentName: '',
                studentId: '',
                department: ''
            },
            tableData: [],
            selectedRows: [],
            page: {
                current: 1,
                size: 10,
                total: 0
            }
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        async fetchData() {
            try {
                this.loading = true
                const params = {
                    current: this.page.current,
                    size: this.page.size,
                    studentName: this.searchForm.studentName,
                    studentId: this.searchForm.studentId,
                    department: this.searchForm.department
                }
                const { data } = await getPageApi(params)
                this.tableData = data.records
                this.page.total = data.total
            } catch (error) {
                console.error('获取列表失败：', error)
                this.$message.error('获取列表失败')
            } finally {
                this.loading = false
            }
        },
        handleSearch() {
            this.page.current = 1
            this.fetchData()
        },
        resetSearch() {
            this.searchForm = {
                studentName: '',
                studentId: '',
                department: ''
            }
            this.handleSearch()
        },
        handleAdd() {
            this.$router.push('/main/renshi/zhaoping/yijipgb/yijipgb')
        },
        handleView(row) {
            this.$router.push({
                path: '/main/renshi/zhaoping/yijipgb/yijipgb',
                query: { mode: 'view', id: row.id }
            })
        },
        handleEdit(row) {
            this.$router.push({
                path: '/main/renshi/zhaoping/yijipgb/yijipgb',
                query: { mode: 'edit', id: row.id }
            })
        },
        async handleDelete(row) {
            try {
                await this.$confirm('确认删除该记录吗？', '提示', {
                    type: 'warning'
                })
                await removeApi(row.id)
                this.$message.success('删除成功')
                this.fetchData()
            } catch (error) {
                if (error !== 'cancel') {
                    console.error('删除失败：', error)
                    this.$message.error('删除失败')
                }
            }
        },
        handleSelectionChange(val) {
            this.selectedRows = val
        },
        handleSizeChange(val) {
            this.page.size = val
            this.fetchData()
        },
        handleCurrentChange(val) {
            this.page.current = val
            this.fetchData()
        },
        async handleBatchDelete() {
            if (this.selectedRows.length === 0) {
                this.$message.warning('请选择要删除的记录')
                return
            }
            try {
                await this.$confirm(`确认删除选中的${this.selectedRows.length}条记录吗？`, '提示', {
                    type: 'warning'
                })
                const ids = this.selectedRows.map(row => row.id)
                await batchRemoveApi(ids)
                this.$message.success('批量删除成功')
                this.fetchData()
            } catch (error) {
                if (error !== 'cancel') {
                    console.error('批量删除失败：', error)
                    this.$message.error('批量删除失败')
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
    width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 20px);
}

.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  padding: 20px;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  h1 {
    font-size: 24px;
    color: #2c3e50;
    margin: 0;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #409EFF, #67C23A);
      border-radius: 3px;
    }
  }
}

.back-button {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.main-content {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.search-bar {
    margin-bottom: 20px;
    .search-form {
        .el-form-item {
            margin-bottom: 10px;
        }
    }
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}

.el-table {
    margin-top: 20px;
}
</style> 